<template>
  <div style="text-align: center;">
		
    <el-form :model="userInfo" status-icon :rules="rules" ref="userInfo" label-width="100px" class="formInfo">
      <h2>{{ userInfo.username }}, 欢迎来到营养膳食系统！</h2>
    <el-form-item label="头像" prop="avatar">
      <el-input type="text" v-model="userInfo.avatar" autocomplete="off"></el-input>
    </el-form-item>  
    <el-form-item label="邮箱" prop="email">
				<el-input type="text" v-model="userInfo.email" autocomplete="off"></el-input>
			</el-form-item>
      <el-form-item label="手机号" prop="phone">
				<el-input type="text" v-model="userInfo.phone" autocomplete="off"></el-input>
			</el-form-item>
      <el-form-item label="所在地" prop="city">
				<el-input type="text" v-model="userInfo.city" autocomplete="off"></el-input>
			</el-form-item>
      <el-form-item>
				<el-button type="primary" @click="updateUserInfo()">提交</el-button>
				<el-button @click="getUserInfo()">重置</el-button>
			</el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data(){
    return {
      userInfo:{},
      rules:{
        email:[
          {required: true, message: '请输入邮箱',trigger:'blur'},
          {pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,message:"请输入正确的邮箱",trigger:'blur'}
        ],
        phone:[
          {required:true, message:'请输入手机号',trigger:'blur'}
        ],
        city:[
          {required: true,message:'请输入所在地',trigger:'blur'}
        ],
        avatar:[
          {required:true,message:'请输入头像网站',trigger:'blur'}
        ]
      }
    }
  },
  created() {
			this.getUserInfo()
		},
    methods:{
      getUserInfo() {
				this.$axios.get("/sys/userInfo").then(res => {

					this.userInfo = res.data.data;
				})
    },
    updateUserInfo(){
          this.$axios.post("/sys/user/updateInfo",this.userInfo).then(res=>{
             this.$message({
              message:'恭喜你，操作成功',
              type:'success'
             })
             location.reload();
          })
    }
}
}
</script>

<style>
.formInfo {
	width: 500px;
	margin: 30px auto;
  transform: translateX(-10%);
  background-color: #fff;
  padding: 25px 30px 15px 5px;
  border-radius: 10px;
}
.el-form-item__label,
.el-input {
  font-size: 18px;
}
h2 {
  font-size: 22px;
}
</style>